<template>
<!-- 体检报告 -->
    <div>
       <!-- 头部 -->
        <div class="frist_show">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>报告查询</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
        </div>
        <!-- 报告信息 -->
        <div class="xinxi" v-if="param">
          <span style="font-size:25px;cursor: pointer;">体检预约套餐及报告查询</span>
          <svg class="iconi myIcomben" aria-hidden="true">
              <use xlink:href="#icon-jiantouyou"></use>
          </svg>
              <div>
                  <div style="width:1500px;height:250px;margin-top:55px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);background-color:FloralWhite;border-radius: 8px;margin-bottom:80px" v-for="item in listtype" :key="item.besId">
                      <span style="font-size:25px;margin-left:1220px;">预约时间:</span><span style="font-size:25px;margin-right:40px">{{item.besTime}}</span>
                      <el-divider></el-divider>
                      <span style="font-size:25px;margin-right:15px;margin-left:15px">姓名:</span><span style="font-size:25px;margin-right:1000px">{{item.besName}}</span>
                      <div style="margin-top:25px">
                          <h4 style="margin-left:15px;display: inline;">基本信息</h4>
                          <svg class="iconi myIcomben" aria-hidden="true">
                              <use xlink:href="#icon-jiantouyou"></use>
                          </svg><br><br>
                          <span style="font-size:15px;margin-right:15px;margin-left:15px;">手机号:</span><span style="font-size:15px;margin-right:15px;">{{item.besPhone}}</span>
                          <span style="font-size:15px;margin-right:15px;margin-left:15px;">性别:</span><span style="font-size:15px;margin-right:980px;">{{item.besGender}}</span>
                          <!-- <a target="_blank" href="http://192.168.43.183/files/《重构——改善既有代码的设计》@www.ishare1.cn1635497393412.pdf">aaaaaa</a> -->
                          <button class="chakan" @click="watchBesSm(item.besSmId)">套餐详情</button>
                          <button class="chakan" @click="chakan(item.besId)" v-if="item.besIsUpload === 1 ? true:false">查看</button>
                          <button class="chakan" v-if="item.besIsUpload === 0 ? true:false">未出报告</button>
                      </div>
                  </div>
              </div>
        </div>

        <!-- 如果没有报告就显示没有报告 -->
        <el-empty description="未出报告" v-else style="position: absolute;top:100px;left:600px" :image-size="300"></el-empty>
        <!-- 查看套餐详情的对话框 -->
        <el-dialog title="查看套餐详情" :visible.sync="dialogTableVisible" width="70%">
          <el-descriptions title="套餐信息" direction="vertical" :column="3" border>
            <template slot="extra">
              <el-button type="success" @click="dialogTableVisible=false">关闭详情</el-button>
            </template>
            <el-descriptions-item label="套餐名称">{{watchSetMeal.besSmName}}</el-descriptions-item>
            <el-descriptions-item label="套餐总价格">{{watchSetMeal.besSmPrice}}</el-descriptions-item>
            <el-descriptions-item label="适用人群">{{watchSetMeal.besSmApply}}</el-descriptions-item>
            <el-descriptions-item label="适用年龄段">{{watchSetMeal.besSmAge}}</el-descriptions-item>
            <el-descriptions-item label="套餐图片" :span='3'><img :src="'http://192.168.43.183/files/' + watchSetMeal.besSmImage" width="70px" height="50px"></el-descriptions-item>
            <el-descriptions-item label="套餐描述" :span='3'>{{watchSetMeal.besSmDesc}}</el-descriptions-item>
            <el-descriptions-item label="注意事项" :span='3'>{{watchSetMeal.besSmItem}}</el-descriptions-item>
          </el-descriptions>
          <h1>套餐项目详情</h1>
          <el-table :data="watchSetMeal.list" max-height="530px">
            <el-table-column prop="besProName" label="项目名称" width="335"></el-table-column>
            <el-table-column  prop="besProPrice" label="项目价格"></el-table-column>
            <el-table-column prop="besProGender" label="适用性别"></el-table-column>
            <el-table-column prop="besProAge" label="适用年龄段"></el-table-column>
          </el-table>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'Report',
  data () {
    return {
      listtype: [],
      param: true,
      watchSetMeal: {}, // 查看详情的方法
      dialogTableVisible: false // 打开套餐详情对话框的变量
    }
  },
  methods: {
    initGetBespeakResult () {
      const loading = this.$loading({
        lock: true,
        text: '正在努力加载',
        spinner: 'el-icon-loading',
        background: 'rgb(255, 255, 255)'
      })
      let a = sessionStorage.getItem('user')
      let id = JSON.parse(a)
      let str = id.memId
      this.$axios.post(`/api/bespeakresult?id=` + str).then(result => {
        console.log(result.data)
        if (result.data !== '' || result.data !== null) {
          result.data.forEach((item, index) => {
            this.listtype.push(item)
          })
          this.param = true
        } else {
          this.param = false
        }
        loading.close()
      })
    },
    // 查看的点击事件
    chakan (besid) {
      this.$router.push('/sculpture/' + besid)
    },
    // 点击查看详情
    watchBesSm (besSmId) {
      this.$axios.post(`/api/setmeal/clickUp?besSmId=${besSmId}`).then(({data}) => {
        this.dialogTableVisible = true
        this.watchSetMeal = data
      })
    }
  },
  created () {
    this.initGetBespeakResult()
  }
}
</script>

<style>
.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}
.frist_show .el-breadcrumb{margin-top: 15px;}
.xinxi{position: absolute;top:65px;left:21px}
.iconi{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
.myIcomben{font-size: 15px;cursor: pointer;transform:rotate(90deg)}
.myIcomben:hover{color: darkgrey;}
.chakan{background-color: DeepSkyBlue;width:90px;height:35px;border-radius: 8px;border:none;outline: none;color:white; cursor: pointer;transition: all 0.4s;}
.chakan:hover{transform: scale(0.9);}
</style>
